import PropTypes  from "prop-types";
import { useState } from "react";

import "./style.scss"
function PageA(){
    let [visiable,setVisiable] = useState(false)
    let submit =()=>{
        setTimeout(()=>{
            console.log('submit...');
            console.log("发送ajax请求。。。");
            setVisiable(false)
        },2000)
    }
    return(
        <div>
           <button onClick={()=>setVisiable(true)}>蒙层开启</button>
           <Modal
           title={ <span style={{color:'red'}}>删除用户</span> }
           closable
           type="danger"
           visiable={visiable}
           onCancel={()=>setVisiable(false)}
           onOk={submit}
           width={500}
           footer这个props叫render props
        //    footer ={
        //     ()=>{
        //         // return [
        //         //     <Button type='danger' key='1' onClick={()=>setVisiable(false)}>残忍离开</Button>,
        //         //     <Button type='primary'>确定</Button>
        //         // ]

        //     }
        //    }
           >
            <div>
                <input type="text" name="" id="" />
                <div>你确定要添加此用户吗？</div>
            </div>
           </Modal>
        </div>
    )
}
// Modal.propTypes ={
//     //title:PropTypes.string,//表示期待传递过来的title是字符串类型
//     //title:PropTypes.number,//表示期待传递过来的title是数字类型
//     title:PropTypes.node,
//     closable:PropTypes.bool,
//     children:PropTypes.node,
//     type:PropTypes.oneOf(["dangrer","confirm","info"]),
//     // visiable:PropTypes.bool,
//     onCancel:PropTypes.func,
//     onOk:PropTypes.func,
//     // footer:PropTypes.func,
//     width:PropTypes.oneOfType([
//         PropTypes.number,
//         PropTypes.string
//     ]

//     )
// } 
// //非必传项，需要提供默认值
// Modal.defaultProps={
//     title:'默认小标题',
//     closed:true,
//     children:<div>主题内容的默认</div>,
//     type:"info",
//     visiable:false,
//     onCancel:()=>console.log('没有任何东西的'),
//     onOk:()=>console.log('没有任何东西的'),
//     // footer:()=>console.log('没有任何东西的'),
//     width:520

// }

function Modal(props){
    // console.log(props);
    let {children,visiable,onCancel,width} = props
let handerLayer = e =>{
    // console.log("handerLayer...");
    //e.target表示实打实点击的那个元素
    // console.log(e.target);
     // e.currentTarget 表示点击的那个元素在的最外层元素
    // console.log(e.currentTarget);
    if(e.target.dataset.self){
            onCancel()
    }
}
return (
         //data-self = "layer" 是h5中的自定义属性
         <div 
         className="ml-layer"
         data-self = "layer"
         onClick={handerLayer}
         style={{display: visiable ? 'block':'none'}}
         >
            <div className="ml-modal" 
            style={{ width: `${width}px`, marginLeft: `-${width / 2}px` }}
            >
            <header>
                 {/* props穿透 */}
                {
                    <ModalHeader {...props}></ModalHeader>
                }
            </header>
            <main>
                {
                    children
                }
            </main>
            <footer>
            <ModalFooter {...props}></ModalFooter>
            </footer>
            </div>
         </div>
)  
}
function  ModalHeader(props){
    // console.log(props);
   let {title,closable,onCancel} = props;

    return (
        <div>
            <div>{title}</div>
            <div onClick={onCancel}>{closable && 'x'}</div>
        </div>
    )
}


function ModalFooter(props){
    // console.log(props);
    let {type,onCancel,onOk,footer} = props
    //渲染函数
    let renderFooter=()=>{
        let btns=[]
        switch (type){
            case 'confirm':
                btns=[
                    <Button type='primary' key='1' onClick = {onOk}>确定</Button>,
                    <Button key='2' onClick={onCancel}>取消</Button>
                ]
                break;
            case 'danger':
                btns=[
                    <Button type='danger' key='1' onClick = {onOk}>确定</Button>,
                    <Button key='2' onClick={onCancel}>取消</Button>
                ]
                break;
            case 'info':
                btns=[
                    <Button type='info' key='1' onClick = {onCancel}>确定</Button>,
                  
                ]
                break;

        }
        return btns
    }
    return(
        console.log(footer),
        footer ? footer(): renderFooter()
        
    )
}



function Button(props){
    
    let {type,children,onClick} = props
    return(
        <div className="ml-button">
            <span className={type} onClick={onClick}>{children}</span>
        </div>
    )
}
Button.propTypes={
    children:PropTypes.node,
    type:PropTypes.oneOf(['primary','danger','default','info']),
    onClick:PropTypes.func
}
Button.defaultProps={
    children:'按钮',
    type:'default',
    onClick:()=>console.log('没有传任何东西')

}
export default PageA;